<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三维点云检索</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-image: url("images/shenhai.jpg");
        }
        .container {
            margin: 20px auto;
            width: 500px;
            text-align: center;
            background-color: #f2f2f2;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
        .file-input {
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .output {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>三维点云检索</h1>
        <input type="file" id="pointCloudFile" class="file-input">
        <button onclick="processPointCloud()">上传点云文件</button>
        <div class="output">
            <h2>输出结果</h2>
            <a id="downloadLink" style="display: none;">下载点云文件</a>
        </div>
    </div>

    <script>
        function processPointCloud() {
            var fileInput = document.getElementById('pointCloudFile');
            var file = fileInput.files[0];
            
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var pointCloudData = e.target.result;
                    
                    // 在这里进行点云处理和检索
                    
                    // 模拟生成输出文件
                    var outputData = "输出点云数据";
                    var outputFileName = "output.pcd";
                    
                    // 创建下载链接
                    var downloadLink = document.getElementById('downloadLink');
                    downloadLink.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(outputData);
                    downloadLink.download = outputFileName;
                    downloadLink.style.display = 'block';
                };
                reader.readAsText(file);
            }
        }
    </script>
</body>
</html>